import React from 'react'
import {Tabs,Select,Table, Divider, Tagm,message} from 'antd';
import './index.less';
import axios from 'axios';
import {PATH,IP} from '../../../utils/urls';
import SearchBar from '../../../components/searchbar'
const { TabPane } = Tabs;
const { Option } = Select;
import moment from 'moment'
import {languageKindList, musicKindList, publishCountry,LOGTYPE} from "../../../utils/config";
import BreadcrumbCustom from "../../../components/BreadcrumbCustom";

export default class Resourcestatusmanager extends React.Component {
    columnsArray = [
	{
        title: 'ID',
        dataIndex: 'id',
        key: 'id',

    },{
        title: 'appid',
        dataIndex: 'appId',
        key: 'appId',
    },
    {
        title: '名称',
        dataIndex: 'resourceName',
        key: 'resourceName',
    },
	{
        title: '类型',
        dataIndex: 'resourceTypeName',
        key: 'resourceTypeName',
    },
    {
        title: 'CPU利用率',
        key: 'cpuRate',
        dataIndex: 'cpuRate',
    },
    {
        title: '内存利用率',
        key: 'memoryRate',
        dataIndex: 'memoryRate',
    },
    {
        title: '硬盘利用率',
        key: 'disk',
        dataIndex: 'disk',
    },
    {
        title: '网络IO',
        key: 'io',
        dataIndex: 'io',
    },
    {
        title: '状态',
        key: 'serviceStatusName',
        dataIndex: 'serviceStatusName',
    },
	 {
        title: '电压',
        key: 'voltage',
        dataIndex: 'voltage',
    },
	{
        title: '电流',
        key: 'electric',
        dataIndex: 'electric',
    },
	{
        title: '剩余电量',
        key: 'remainingBattery',
        dataIndex: 'remainingBattery',
    },
	{
        title: '备用电源',
        key: 'standbyPower',
        dataIndex: 'standbyPower',
    },
	{
        title: '有功功率',
        key: 'activePower',
        dataIndex: 'activePower',
    },
	{
        title: '无功功率',
        key: 'reactivePower',
        dataIndex: 'reactivePower',
    },
		{
        title: '端口带宽',
        key: 'interfaceBandwidth',
        dataIndex: 'interfaceBandwidth',
    },
	
    {
        title: '更新时间',
        key: 'createTime',
        dataIndex: 'createTime',
    }
    ];
    constructor(props) {
        super(props);
        this.state = {
            resourceStatusArray:[],
            queryInfo:{
                current:1,
                total2:10,
                pageSize:10
            },
            tableDetailList:[],
            param:{
                resourceName:"",
                pageNum: 1,
                pageSize: 10,
            }
        };
      
         this.changePage(1,null,null,null,null);
    }
    /**
     * 点击操作功能
     * @returns {*}
     */
    actionClick = (props0,props1) => {
        let path = {
            pathname:'/changehardwareresource',
            state:{
                appId:this.state.hardWareArray[parseInt(props1.index)].appId,
                name:this.state.hardWareArray[parseInt(props1.index)].resourceName,
                resouceType:this.state.hardWareArray[parseInt(props1.index)].resouceType
            },
        }
        this.props.history.push(path);
    }
    
	onSearch = (searchFields) => {
        console.log(searchFields);
        let type = searchFields.type;
        let appId = searchFields.appId;
        let start = null;
        let end = null;
        if(type == -1){
            type = null;
        }
        if(appId == ""){
            appId = null;
        }
        if(searchFields.start){
            start = moment(searchFields.start).format('YYYY-MM-DD');
        }
        if(searchFields.end){
            end = moment(searchFields.end).format('YYYY-MM-DD');
        }
        this.changePage(1,type,appId,start,end);
    }

    searchFields = () => {
        return [{
            title: '类型',
            key: 'type',
            type: 'select',
            defaultValue: LOGTYPE[0].name,
            items: () => LOGTYPE.map(ele => ({
                value: ele.type,
                mean: ele.name
            })),
        }, {
            title: 'AppId',
            key: 'appId',
            type: 'input',
            defaultValue: LOGTYPE[0].name
        }, {
            title: '开始日期',
            key: "start",
            type: 'date',
            defaultValue: ""
        }, {
            title: '结束日期',
            key: "end",
            type: 'date',
            defaultValue: ""
        }]
    }

    /**
     * 切换页数
     * @param page
     */
    changePage = (page,resourceType,appId,createTimeBegin,createTimeEnd) => {
        console.log(page);
        let param = {
            current:page,
            size: 10,
            resourceType:resourceType,
            appId:appId,
            createTimeBegin:createTimeBegin,
            createTimeEnd:createTimeEnd
        }
        axios.post(PATH.resourceStatusList,param).then(response=>{
            console.log(response);
            this.setState({
                tableDetailList:response.data.data.records,
                queryInfo:{
                    total2: response.data.data.total,
                    pageSize:response.data.data.size,
                    current:response.data.data.current
                }
            })
        })
    }

    render() {
        return (
            <div>
                <BreadcrumbCustom first="监控" second="监控日志" />
                <SearchBar onSubmit={this.onSearch} fields={this.searchFields()}/>
                <Table  className= "reasureManagerClass" bordered dataSource={this.state.tableDetailList}
                   columns={this.columnsArray}
                   rowKey={record => record.key}
                   pagination={{  // 分页
                       pageSize: this.state.queryInfo.pageSize,  //显示几条一页
                       current: this.state.queryInfo.current,//当前显示页
                       total: this.state.queryInfo.total2,//数据总数量
                       onChange: this.changePage,//切换页数
                   }}
                />
            </div>
        )
    }
}